<template>
	<view
		class="you-scroll"
		ref="youScroll"
	>
		<scroll-view
			class="you-scroll-inner"
			ref="youScrollInner"
			:scroll-top="scrollToTop"
			scroll-with-animation
			scroll-y
			refresher-enabled
			:refresher-triggered="triggered"
			:refresher-threshold="50"
			:scroll-into-view="id()"
			@touchstart="startFn"
			@touchmove="moveFn"
			@touchend="endFn"
			@touchcancel="endFn"
			@scroll="scroll"
		>
			<view class="you-scroll-content">
				<slot />
			</view>
			<view
				:id="id"
				class="bot"
			/>
		</scroll-view>
	</view>
</template>
<script>
export default {
  props: {
    pullDownDistance: {
      type: Number,
      default: 50 // 下拉刷新距离
    },
    reachBottomDistance: {
      type: Number,
      default: 50 // 上拉加载距离
    },
    downPullToRefresh: {
      type: String,
      default: '下拉刷新'
    },
    downReleaseToRefresh: {
      type: String,
      default: '松开刷新'
    },
    downRefreshing: {
      type: String,
      default: '刷新中…'
    },
    len: {
      type: Number
    }
  },
  watch: {
    len: {
      handler(val) {

        this.viewIndex = 'im_' + val

      },
      immediate: true
    }
  },
  data() {
    return {
      scrollToTop: 0,
      scrollTop: 0,
      oldTop: 0,
      sPageY: 0,
      mPageY: 0,
      ePageY: 0,
      translateY: 0,
      pullDownStatus: 1, // 1：下拉刷新 2：松开刷新 3：刷新中
      isDown: false,
      viewIndex: '',
      triggered: false
    }
  },
  computed: {
    id() {
      return this.viewIndex
    }
  },
  methods: {
    startFn(e) {
      this.isDown = true
      this.sPageY = e.changedTouches[ 0 ].pageY
      this.pointY = this.translateY
    },
    moveFn(e) {
      const view = uni.createSelectorQuery().in(this).select('.you-scroll-inner')

      view.fields({
        size: true,
        scrollOffset: true
      }, data => {
        this.scrollTop = data.scrollTop
        this.mPageY = e.changedTouches[ 0 ].pageY
        if (this.scrollTop <= 0) {
          const translateY = ((this.mPageY - this.sPageY) / 2) + this.pointY

          this.translateY = (translateY < 0 ? 0 : translateY)

          if (this.pullDownStatus != 3) {
            if (this.translateY < this.pullDownDistance) {
              this.pullDownStatus = 1
            } else if (this.translateY >= this.pullDownDistance) {
              this.pullDownStatus = 2
            }
          }
        }
      }).exec()

    },
    endFn(e) {
      this.isDown = false
      this.ePageY = e.changedTouches[ 0 ].pageY
      setTimeout(() => {
        this.translateY = this.translateY >= this.pullDownDistance ? this.pullDownDistance : 0
        if (this.pullDownStatus == 2) { // 开始刷新
          this.pullDownStatus = 3
          this.$emit('onPullDown', this.endPullDown)

        }
      }, 100)

    },
    endPullDown(mm) {
      if (this.timeout) clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.translateY = 0
        this.pullDownStatus = 1
      }, mm || 0)
    },
    prevent(e) {
      if (this.translateY > 0) {
        e.preventDefault()
      }
    },
    scroll(e) {
      this.$emit('onScroll', e)
      this.oldTop = e.detail.scrollTop

      if (this.timeout) clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.scrolltolower(e)
      }, 20)
    },
    scrolltolower(e) {
      this.triggered = true
      const view = uni.createSelectorQuery().in(this).select('.you-scroll-inner')

      const that = this

      view.fields({
        size: true,
        scrollOffset: true
      }, data => {
        if (data.scrollTop >= (e.detail.scrollHeight - data.height - this.reachBottomDistance)) {
          this.$emit('onLoadMore', e)
          that.triggered = false
          console.log('下拉刷新')
        }
      }).exec()

    },
    isWeixinCient() {
      const ua = navigator.userAgent.toLowerCase()

      if (ua.match(/MicroMessenger/i) === 'micromessenger') {
        return true
      } else {
        return false
      }
    },
    goTop(top) {
      this.scrollToTop = this.oldTop
      this.$nextTick(function() {
        this.scrollToTop = top || 0
      })
    }
  },
  mounted() {
    // #ifdef H5
    if (this.isWeixinCient()) {
      document.body.addEventListener('touchmove', this.prevent)
    }
    // #endif
  },
  destroyed() {
    // #ifdef H5
    if (this.isWeixinCient()) {
      document.body.removeEventListener('touchmove', this.prevent)
    }
    // #endif
  }
}
</script>
<style scoped>
	.you-scroll {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		background-color: #eee;
	}
	.you-scroll .pullDown {
		width: 100%;
		height: 40px;
		line-height: 50px;
		text-align: center;
		font-size: 14px;
		overflow: hidden;
		transform: translateY(-100%);
		position: absolute;
		top: -40px;
		left: 0;
	}
	.you-scroll .pullDown .down-icon {
		width: 40px;
		height: 32px;
		display: inline-block;
		vertical-align: middle;
	}
	.you-scroll .pullDown .animate {
		-webkit-animation: scaleIcon 1s infinite linear;
		-moz-animation: scaleIcon 1s infinite linear;
		-ms-animation: scaleIcon 1s infinite linear;
		animation: scaleIcon 1s infinite linear;
	}
	.you-scroll .pullDown span {
		white-space: nowrap;
		overflow: hidden;
		display: inline-block;
		vertical-align: middle;
	}

	.you-scroll .you-scroll-inner {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	.you-scroll-content {
		overflow: hidden;
	}
  .bot {
        width: 100vw;
        height: 120rpx;
      }
	@-webkit-keyframes scaleIcon {
		0% {
			transform: scaleY(1);
		}
		40% {
			transform: scaleY(0.8);
		}
		80% {
			transform: scaleY(0.9);
		}
		100% {
			transform: scaleY(1);
		}
	}
	@-moz-keyframes scaleIcon {
		0% {
			transform: scaleY(1);
		}
		40% {
			transform: scaleY(0.8);
		}
		80% {
			transform: scaleY(0.9);
		}
		100% {
			transform: scaleY(1);
		}
	}
	@-ms-keyframes scaleIcon {
		0% {
			transform: scaleY(1);
		}
		40% {
			transform: scaleY(0.8);
		}
		80% {
			transform: scaleY(0.9);
		}
		100% {
			transform: scaleY(1);
		}
	}
	@keyframes scaleIcon {
		0% {
			transform: scaleY(1);
		}
		40% {
			transform: scaleY(0.8);
		}
		80% {
			transform: scaleY(0.9);
		}
		100% {
			transform: scaleY(1);
		}
	}
</style>
